<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">客户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>会员等级</el-breadcrumb-item>
    </el-breadcrumb>

  <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入等级名称" v-model="query">
            <el-button slot="append" @click="serch" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-plus" circle @click="addLevel" ></el-button>
          <el-button type="info" icon="el-icon-refresh" circle @click="refresh"></el-button>
        </el-col>
      </el-row>

        <!-- 数据表格 -->
      <el-table :key="Math.random()"
          :data="tableData"
          border
          style="width: 100%" >
        <el-table-column
            fixed
            align="center"
            prop="id"
            label="Id"
            >
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="等级名称"
            >
        </el-table-column>
        <el-table-column
            align="center"
            prop="growthPoint"
            label="成长值"
            >
        </el-table-column>
        <el-table-column
            align="center"
            prop="ratio"
            label="积分增减比"
            >
        </el-table-column>
        <el-table-column
            align="center"
            prop="defaultStatus"
            label="默认等级"
            >
          <template slot-scope="scope">
            <p v-if="scope.row.defaultStatus==1">是</p>
            <p type="danger" v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="freeFreightPoint"
            label="免运费标准"
            >
        </el-table-column>
        <el-table-column width="120"
            prop="priviledgeComment"
            label="评论获奖特权"
            align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.priviledgeComment==1">是</p>
            <p type="danger" v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column width="120"
            align="center"
            prop="priviledgePromotion"
            label="专享活动特权"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.priviledgePromotion==1">是</p>
            <p type="danger" v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column width="120"
            align="center"
            prop="priviledgeMemberPrice"
            label="会员价格特权"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.priviledgeMemberPrice==1">是</p>
            <p type="danger" v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="priviledgeBirthday"
            label="生日特权"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.priviledgeBirthday==1">是</p>
            <p type="danger" v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="note"
            label="备注"
        >
        </el-table-column>
        <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"  size="medium" circle @click="editLevel(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete"  size="medium" circle @click="deleteLevel(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <!--修改弹框的 表单 -->
      <el-dialog
          title="修改会员等级信息"
          :visible.sync="EditDialogVisible"
          width="60%"

      >
        <div>
        <el-form :model="EditFormData" status-icon :rules="EditFormRules" ref="EditRuleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="等级" prop="name">
                <el-input style="width: 100px" type="text" v-model="EditFormData.name" autocomplete="off" ></el-input>
              </el-form-item>
<!--              <el-form-item label="等级名称">
                <el-select v-model="EditFormData.id" placeholder="请选择" style="width: 120px">
                  <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>-->
            </el-col>
            <el-col :span="6">
              <el-form-item label="成长值" prop="growthPoint">
                <el-input style="width: 100px" type="text" v-model.number="EditFormData.growthPoint" autocomplete="off" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="积分增减比" prop="ratio">
                <el-input style="width: 100px" type="text" v-model="EditFormData.ratio" autocomplete="off" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="免运费标准" prop="freeFreightPoint">
                <el-input style="width: 100px" type="text" v-model.number="EditFormData.freeFreightPoint" autocomplete="off" ></el-input>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item label="备注" prop="note">
                <el-input style="width: 100px" type="text" v-model="EditFormData.note" autocomplete="off" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="默认等级" prop="defaultStatus">
                <template>
                  <el-radio v-model="EditFormData.defaultStatus" :label="1">是</el-radio>
                  <el-radio v-model="EditFormData.defaultStatus" :label="0">否</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="评论获奖特权" prop="priviledgeComment">
                <template>
                  <el-radio v-model="EditFormData.priviledgeComment" :label="1">是</el-radio>
                  <el-radio v-model="EditFormData.priviledgeComment" :label="0">否</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="专享活动特权" prop="priviledgePromotion">
                <template>
                  <el-radio v-model="EditFormData.priviledgePromotion" :label="1">是</el-radio>
                  <el-radio v-model="EditFormData.priviledgePromotion" :label="0">否</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会员价格特权" prop="priviledgeMemberPrice">
                <template>
                  <el-radio v-model="EditFormData.priviledgeMemberPrice" :label="1">是</el-radio>
                  <el-radio v-model="EditFormData.priviledgeMemberPrice" :label="0">否</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="生日特权" prop="priviledgeBirthday">
                <template>
                  <el-radio v-model="EditFormData.priviledgeBirthday" :label="1">是</el-radio>
                  <el-radio v-model="EditFormData.priviledgeBirthday" :label="0">否</el-radio>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </div>


        <span slot="footer" class="dialog-footer">
          <el-button @click="EditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEditLevel">确 定</el-button>
        </span>
      </el-dialog>
      <!--添加弹框的 表单 -->
      <el-dialog
          title="添加会员等级信息"
          :visible.sync="insertDialogVisible"
          width="60%"
          @close="closAll"
      >
        <div>
          <el-form :model="insertFormData" status-icon :rules="insertFormRules" ref="insertRuleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="6">
                <el-form-item label="等级" prop="name">
                  <el-input style="width: 100px" type="text" v-model="insertFormData.name" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="成长值" prop="growthPoint">
                  <el-input style="width: 100px" type="text"  v-model.number="insertFormData.growthPoint" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="积分增减比" prop="ratio">
                  <el-input style="width: 100px" type="text"  v-model="insertFormData.ratio" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="免运费标准" prop="freeFreightPoint">
                  <el-input style="width: 100px" type="text" v-model v-model.number="insertFormData.freeFreightPoint" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="备注" prop="note">
                  <el-input style="width: 100px" type="text" v-model="insertFormData.note" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="默认等级" prop="defaultStatus">
                  <template>
                    <el-radio v-model="insertFormData.defaultStatus" :label="1">是</el-radio>
                    <el-radio v-model="insertFormData.defaultStatus" :label="0">否</el-radio>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="评论获奖特权" prop="priviledgeComment">
                  <template>
                    <el-radio v-model="insertFormData.priviledgeComment" :label="1">是</el-radio>
                    <el-radio v-model="insertFormData.priviledgeComment" :label="0">否</el-radio>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="专享活动特权" prop="priviledgePromotion">
                  <template>
                    <el-radio v-model="insertFormData.priviledgePromotion" :label="1">是</el-radio>
                    <el-radio v-model="insertFormData.priviledgePromotion" :label="0">否</el-radio>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="会员价格特权" prop="priviledgeMemberPrice">
                  <template>
                    <el-radio v-model="insertFormData.priviledgeMemberPrice" :label="1">是</el-radio>
                    <el-radio v-model="insertFormData.priviledgeMemberPrice" :label="0">否</el-radio>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="生日特权" prop="priviledgeBirthday">
                  <template>
                    <el-radio v-model="insertFormData.priviledgeBirthday" :label="1">是</el-radio>
                    <el-radio v-model="insertFormData.priviledgeBirthday" :label="0">否</el-radio>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>


        <span slot="footer" class="dialog-footer">
          <el-button @click="insertDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddLevel">确 定</el-button>
        </span>
      </el-dialog>


    </el-card>
  </div>
</template>

<script>
export default {
  name: "level",
  data() {
    return {
      //查询条件
      query:"",
      //当前页码
      currentPage: 1,
      //每页显示记录
      pageSize:5,
      //总条数
      total:0,
      //当前的记录数据
      tableData: [],
      //是否打开修改弹框 true 打开 false 关闭
      EditDialogVisible: false,
      //是否打开添加弹框 true 打开 false 关闭
      insertDialogVisible: false,
      //修改弹框表单的数据
      EditFormData:{},
      //添加弹框表单的数据
      insertFormData:{},
      //下拉框
      options: [],
      //修改弹框 表单的 规则
      EditFormRules:{
        growthPoint:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
        ],
        ratio:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          { required: true, message: '请输入数字', trigger: 'blur' },
          { pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
            message: '必须为正数',
            trigger: 'blur'}
        ],
        freeFreightPoint:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          { pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
            message: '必须为正数',
            trigger: 'blur'}
        ],
        note:[
          { required: true, message: '地址不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
      },
      //添加弹框 表单的 规则
      insertFormRules:{
        name:[
          {required:true,message:"会员等级不能为空",trigger:"blur"}
        ],
        growthPoint:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          { pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
            message: '必须为正数',
            trigger: 'blur'}
        ],
        ratio:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          { required: true, message: '请输入数字', trigger: 'blur' },
          { pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
            message: '必须为正数',
            trigger: 'blur'}
        ],
        freeFreightPoint:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
        ],
        note:[
          { required: true, message: '备注不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    //页面加载自动执行
    this.ininLevelTable(this.currentPage,this.pageSize);
    //下拉框赋值
    //this.xialakuang();
  },
  methods: {
    //给表单赋值，显示数据
    ininLevelTable(currentPage,pageSize){
      var that=this;
      this.$http.post(`/customer/memberLevel/findLevelByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (resp) {
          if (resp.data.code===200){
            that.tableData=resp.data.data.records;
            that.total=resp.data.data.total;
          }else {
            that.$message.error(resp.data.msg);
          }
      })
    },
  /* //下拉框赋值
    xialakuang(){
      var that = this;
      this.$http.get(`/customer/memberLevel/getLevelAll`).then(function (resp) {
        that.options=resp.data.data;

      })
    },*/
    //修改每页几条的方法
    handleSizeChange(val) {
      this.pageSize=val;
      this.ininLevelTable(this.currentPage,this.pageSize);
    },
    //修改页数的方法
    handleCurrentChange(val) {
      this.currentPage=val;
      this.ininLevelTable(this.currentPage,this.pageSize);
    },
    //模糊查询按钮的方法
    serch(){
      this.currentPage=1,
      this.pageSize=5,
      this.ininLevelTable(this.currentPage,this.pageSize);
    },
    //修改弹框回显的方法
    editLevel(id){
      this.EditDialogVisible = true;
      var that = this;
      this.$http.get(`/customer/memberLevel/getLevelById/${id}`).then(function (resp){
        that.EditFormData=resp.data.data;
      })
    },
    //添加弹出框
    addLevel(){
      this.insertDialogVisible=true;
    },
    //表单清空
    closAll(){
      this.$refs.insertRuleForm.resetFields();
    },
    //刷新局部页面
    refresh (){
      this.query='';
      this.ininLevelTable(1,this.pageSize);
    },
    //确认修改等级信息
    confirmEditLevel(){
      var that = this;
      this.$refs['EditRuleForm'].validate((valid) => {
        if (valid) {
          that.$http.put("/customer/memberLevel/updateLevel/",this.EditFormData).then(function (resp){
            if (resp.data.code === 200){
              that.$message.success("修改成功");
              that.EditDialogVisible=false;
              that.ininLevelTable(that.currentPage,that.pageSize);
            }else{
              that.$message.error(resp.data.msg);
            }
          })
        }
      })
    },
    //确认添加等级信息
    confirmAddLevel(){
      var that = this;
      this.$refs['insertRuleForm'].validate((valid) => {
        if (valid) {
          this.$http.post("/customer/memberLevel/addLevel/",this.insertFormData).then(function (resp){
            if (resp.data.code === 200){
              that.$message.success("添加成功");
              that.insertDialogVisible=false;
              that.ininLevelTable(that.currentPage,that.pageSize);
            }else{
              that.$message.error(resp.data.msg);
            }
          })
        }
      })
    },
    //删除会员等级
    deleteLevel(id){
      var that=this;
      this.$confirm('确定删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/customer/memberLevel/deleteLevel/${id}`).then(function (resp) {
          if (resp.data.code!=200){
            return that.$message.error("删除失败");
          }else {
            if (that.total%that.pageSize==1){
              that.currentPage--;
            }else {
              that.currentPage = that.currentPage;
            }
            that.$message.success("删除成功");
            that.ininLevelTable(that.currentPage,that.pageSize);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
}
</script>

<style scoped>

</style>